<!DOCTYPE html>
<html xmlns:th="Thymeleaf" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<!--
<script type="text/javascript" th:src="@{/layui/treetable-lay/treetable.js}"></script>
-->
<link type="text/css"  rel="stylesheet"  th:href="@{/layui/css/layui.css}">
<!--
<link type="text/css"  rel="stylesheet"  th:href="@{/layui/treetable-lay/treetable.css}">
-->
<body>
<table class="layui-hide" id = "menu" lay-filter="menu"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add_lay"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="updata_lay"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete_lay"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh_lay"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="add-child">添加下级菜单</a>

</script>
    <th:block th:include="common/include :: footer" />
</body>
</html>

<script type="text/javascript" th:inline="none">
    layui.config({
        base : ctx + '/layui/'
    }).extend({
        treetable : 'treetable-lay/treetable',
    });
   var tablepage =  layui.use(['treetable', 'table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        //渲染表格
        var renderTable = function(){
            layer.load(2);
            treetable.render({
                height:'full-160',
                id:'menu',
                treeColIndex: 1,	//树形图标显示在第几列
                treeSpid: '0',		//最上级的父级id
                treeIdName: 'id',	//id字段的名称
                treePidName: 'parentid',	//pid字段的名称，父级菜单id
                treeDefaultClose: false,	//是否默认折叠
                treeLinkage: false,		//父级展开时是否自动展开所有子级
                elem: '#menu',	//表格id
                url: ctx+'/menuAction/menuListJson',
                toolbar: '#toolbarDemo',
                page: false,
                cols: [[
                    {type:'radio'},
                    {field: 'name', title: '名称',align: 'left'},
                    {field: 'url' , title: '地址',align: 'center'},
                    {field: 'permission', title: '权限',align: 'center'},
                    {field: 'sort', title: '排序',align: 'center'},
                    {fixed: 'right', title:'操作', toolbar: '#barDemo', width:250,align: 'center'}
                ]],
                //数据渲染完的回调
                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                }
            })
        };
        renderTable();

        //监听头工具事件
        table.on('toolbar', function(obj){
            debugger;
            var checkStatus = table.checkStatus('menu');
            var data = checkStatus.data;
            if(obj.event === 'add_lay'){
                $.modal.open("添加菜单", ctx+'/menuAction/menuAdd/0',"","",renderTable);
            }else if(obj.event === "updata_lay"){
                if(data.length != 1){
                    layer.msg("请选择一行进行编辑",{offset:'rb'});
                }else{
                    var id = data[0].id;
                    $.modal.open("编辑菜单", ctx+'/menuAction/menuEdit/'+id,"","",renderTable);
                }
            }else if(obj.event === "delete_lay"){
                if(data.length != 1){
                    layer.msg("请选择一行进行编辑",{offset:'rb'});
                }else{
                    var id = data[0].id;
                    layer.confirm('真的删除选定行的数据吗?', function(index){
                        $.operate.delete(ctx+'menuAction/menuDel/'+id,renderTable);
                        layer.close(index);
                    });
                }
            }else if(obj.event === "refresh_lay"){
                renderTable();
            }
        });
        //监听行工具事件
        table.on('tool(menu)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.operate.delete(ctx+'menuAction/menuDel/'+data.id,renderTable);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                $.modal.open("编辑菜单", ctx+'/menuAction/menuEdit/'+data.id,"","",renderTable);
            } else if(obj.event=='add-child'){
                $.modal.open("添加菜单", ctx+'/menuAction/menuAdd/'+data.id,"","",renderTable);
            }
        });
    })
</script>
